﻿<div>
    <div style="margin-bottom: 16px;">
        <Button @onclick="(e)=>Add()">ADD</Button>
    </div>
    <Tabs Type="@TabType.EditableCard" HideAdd @bind-ActiveKey="activeKey">
        @foreach (var pane in panes)
        {
            <TabPane Key="@pane.Key">
                <Tab>@pane.Title</Tab>
                <ChildContent>@pane.Content</ChildContent>
            </TabPane>
        }
    </Tabs>
</div>

@code{
    private string activeKey;
    private int newTabIndex;

    public record Pane(string Title, string Content, string Key, bool Closable = true);

    List<Pane> panes = new List<Pane>() {
        new("Tab 1", "Content of Tab Pane 1","1"),
        new("Tab 2", "Content of Tab Pane 2","2"),
        new("Tab 3", "Content of Tab Pane 3","3",false),
    };

    private void Add()
    {
        activeKey = $"newTab{newTabIndex++}";
        panes.Add(new Pane($"New Tab", $"New Tab Pane", activeKey));
    }
}